<template>
	<view class="wui-sidebar" :style="[sidebarHeightComputed]">
		<scroll-view v-if="scroll" scroll-with-animation class="sidebar-left" :style="[sidebarWidthComputed]" scroll-y :scroll-top="scrollTopComputed">
			<view
				class="sidebar-left-item"
				@click="sidebarClick(index)"
				:class="[sidebarCurrent === index ? 'sidebar-left-item-active' : '']"
				:style="[sidebarCurrent === index ? activeColorComputed : defaultColorComputed, sidebarItemHeightComputed]"
				v-for="(sidebar, index) in sidebarList"
				:key="index"
			>
				<text v-if="sidebar.icon" class="sidebar-left-item-icon iconfont" :class="[sidebar.icon]" :style="[iconSizeComputed]"></text>
				<text v-if="sidebar.text" class="sidebar-left-item-text" :style="[fontSizeComputed]">{{ sidebar.text }}</text>
			</view>
		</scroll-view>

		<view v-else class="sidebar-left" :style="[sidebarWidthComputed]">
			<view
				class="sidebar-left-item"
				@click="sidebarClick(index)"
				:class="[sidebarCurrent === index ? 'sidebar-left-item-active' : '']"
				:style="[sidebarCurrent === index ? activeColorComputed : defaultColorComputed, sidebarItemHeightComputed]"
				v-for="(sidebar, index) in sidebarList"
				:key="index"
			>
				<text v-if="sidebar.icon" class="sidebar-left-item-icon iconfont" :class="[sidebar.icon]" :style="[iconSizeComputed]"></text>
				<text v-if="sidebar.text" class="sidebar-left-item-text" :style="[fontSizeComputed]">{{ sidebar.text }}</text>
			</view>
		</view>

		<view class="sidebar-right"><slot></slot></view>
	</view>
</template>

<script>
export default {
	name: 'w-sidebar',
	props: {
		sidebarList: {
			type: Array,
			default: () => []
		},
		sidebarHeight: {
			type: [String, Number],
			default: 600
		},
		sidebarWidth: {
			type: [String, Number],
			default: 200
		},
		sidebarItemHeight: {
			type: [String, Number],
			default: 100
		},
		sidebarCurrent: {
			type: Number,
			default: 0
		},
		iconSize: {
			type: [String, Number],
			default: 40
		},
		fontSize: {
			type: [String, Number],
			default: 30
		},
		activeColor: {
			type: String,
			default: '#39B54A'
		},
		defaultColor: {
			type: String,
			default: '#333'
		},
		scroll: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		scrollTopComputed() {
			let top = this.sidebarCurrent * uni.upx2px(this.sidebarItemHeight);
			let bottom = (this.sidebarCurrent + 1) * uni.upx2px(this.sidebarItemHeight);
			return top - uni.upx2px(this.sidebarHeight) / 2 + (bottom - top) / 2;
		},

		sidebarHeightComputed() {
			return {
				'--sidebar-height': uni.upx2px(this.sidebarHeight) + 'px'
			};
		},

		sidebarWidthComputed() {
			return {
				'--sidebar-width': uni.upx2px(this.sidebarWidth) + 'px'
			};
		},
		sidebarItemHeightComputed() {
			return {
				'--sidebar-item-height': uni.upx2px(this.sidebarItemHeight) + 'px'
			};
		},
		fontSizeComputed() {
			return {
				'--font-size': uni.upx2px(this.fontSize) + 'px'
			};
		},
		iconSizeComputed() {
			return {
				'--icon-size': uni.upx2px(this.iconSize) + 'px'
			};
		},
		activeColorComputed() {
			return {
				'--active-color': this.activeColor
			};
		},
		defaultColorComputed() {
			return {
				'--default-color': this.defaultColor
			};
		}
	},
	methods: {
		sidebarClick(index) {
			this.$emit('sidebarClick', index);
		}
	}
};
</script>

<style lang="scss" scoped>
.wui-sidebar {
	display: flex;
	height: var(--sidebar-height);
	background-color: #f1f1f1;
	overflow: hidden;
	.sidebar-left {
		width: var(--sidebar-width);
		height: 100%;
		background-color: #ffffff;

		.sidebar-left-item {
			height: var(--sidebar-item-height);
			display: flex;
			justify-content: center;
			color: var(--default-color);
			align-items: center;
		}
		.sidebar-left-item-icon {
			font-size: var(--icon-size);
		}
		.sidebar-left-item-text {
			font-size: var(--font-size);
		}
		.sidebar-left-item-active {
			background-color: #f1f1f1;
			color: var(--active-color);
			position: relative;
		}
		.sidebar-left-item-active:after {
			content: '';
			position: absolute;
			right: 0;
			height: 40%;
			width: 8rpx;
			background-color: var(--active-color);
			border-radius: 10rpx 0 0 10rpx;
		}
	}

	.sidebar-right {
		flex: 1;
	}
}
</style>
